<template>
	<div>
    <el-divider>
      <el-icon>属性配置</el-icon>
    </el-divider>
    <zh-form label-position="top" :model="_value" :span="24">
      <zh-form-select  prop="type" label="显示类型" v-model="_value.type"
      :options="[
				{ dictKey: 'year', dictValue: 'year'},
				{ dictKey: 'month', dictValue: 'month'},
				{ dictKey: 'date', dictValue: 'date'},
        { dictKey: 'dates', dictValue: 'dates'},
        { dictKey: 'datetime', dictValue: 'datetime'},
        { dictKey: 'week', dictValue: 'week'},
        { dictKey: 'datetimerange', dictValue: 'datetimerange'},
        { dictKey: 'daterange', dictValue: 'daterange'},
        { dictKey: 'monthrange', dictValue: 'monthrange'},
			]"></zh-form-select>
      <zh-form-input  prop="format" label="显示在输入框中的格式" v-model="_value.format"></zh-form-input>
      <zh-form-switch  prop="required" label="是否必填" v-model="_value.required"> </zh-form-switch>
      <zh-form-switch prop="clearable" label="是否可清空" v-model="_value.clearable"> </zh-form-switch>
      <zh-form-switch  prop="editable" label="文本框可输入" v-model="_value.editable"> </zh-form-switch>
      <zh-form-switch prop="readonly" label="是否只读" v-model="_value.readonly"> </zh-form-switch>
      <zh-form-switch prop="disabled" label="是否禁用" v-model="_value.disabled"> </zh-form-switch>      
      <zh-form-input  prop="rangeSeparator" label="选择范围时的分隔符" v-model="_value.rangeSeparator"></zh-form-input>
      <zh-form-input  prop="suffixIcon" label="输入框尾部图标" v-model="_value.suffixIcon"></zh-form-input>
      <zh-form-input  prop="suffixLabel" label="输入框尾部文本（手机端）" v-model="_value.suffixLabel"></zh-form-input>
      <zh-form-input  prop="placeholder" label="为空时占位内容" v-model="_value.placeholder"></zh-form-input>
      <zh-form-input  prop="start" label="可选中的开始时间" v-model="_value.start"></zh-form-input>
      <zh-form-input  prop="end" label="可选中的结束时间" v-model="_value.end"></zh-form-input>
    </zh-form>
  </div>
</template>
<script lang="ts" setup name="InputSetting">
const emits = defineEmits(['update:modelValue']);
//------------------接收传入参数(组件)-------------------
const props = defineProps({
	modelValue: Object,
});
//------------------定义子组件---------------------------

//------------------内部变量定义-------------------------
let _value = ref(Object.assign({fcDragTag:'input'},props.modelValue || {}));
//------------------定义调用方法-------------------------

//------------------初始化------------------------------
onMounted(() => {});
//------------设置给父组件调用的数据/方法(组件)-----------
watch(
	() => props.modelValue,
	(val) => {
		_value.value = Object.assign({fcDragTag:'input'},val || {});
	},
	{
		deep: true,
	}
);
watch(
	() => _value.value,
	(val) => {
		console.log(val);
		emits('update:modelValue', val);
	},
	{
		deep: true,
	}
);

</script>
<style lang="scss" scoped></style>